<template>
  <table class="gridtable">
    <tr>
      <th>工号</th>
      <th>姓名</th>
      <th>角色</th>
      <th>增</th>
      <th>删</th>
      <th>改</th>
      <th>查</th>
    </tr>
    <tr v-for="item in tableDataTrans" :key="item.userId">
      <td>{{item.userId}}</td>
      <td>{{item.name}}</td>
      <td>{{item.consumer}}</td>
      <td><el-checkbox v-model="item.addAccess" @change="updateAdd(item.addAccess,item._id)">增</el-checkbox></td>
      <td><el-checkbox v-model="item.deleteAccess"  @change="updateDelete(item.deleteAccess,item._id)">删</el-checkbox></td>
      <td><el-checkbox v-model="item.updateAccess"  @change="updateUpdate(item.updateAccess,item._id)">改</el-checkbox></td>
      <td><el-checkbox v-model="item.findAccess"  @change="updateFind(item.findAccess,item._id)">查</el-checkbox></td>
    </tr>
 </table>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    computed: {
      tableDataTrans () {
        return this.tableData = this.tableData.sort(this.com.sortRole('userId'))
      }
    },
    mounted() {
      //do something after mounting vue instance
      this.getUserList()
    },
    methods: {
      //增权限
      updateAdd (addAccess,id) {
        let da ={addAccess: addAccess,id: id}
        axios.post('/users/updateAdd',da).then((res)=>{
          if(res.data.status=='0'){
            this.$message.success(res.data.msg)
          }else{
            alert('系统异常！')
            return addAccess = !addAccess
          }
        })
      },
      //删权限
      updateDelete (deleteAccess,id) {
        let da ={deleteAccess: deleteAccess,id: id}
        axios.post('/users/updateDelete',da).then((res)=>{
          if(res.data.status=='0'){
            this.$message.success(res.data.msg)
          }else{
            alert('系统异常！')
            return deleteAccess = !deleteAccess
          }
        })
      },
      //改权限
      updateUpdate (updateAccess,id) {
        let da ={updateAccess: updateAccess,id: id}
        axios.post('/users/updateUpdate',da).then((res)=>{
          if(res.data.status=='0'){
            this.$message.success(res.data.msg)
          }else{
            alert('系统异常！')
            return updateAccess = !updateAccess
          }
        })
      },
      //查权限
      updateFind (findAccess,id) {
        let da ={findAccess: findAccess,id: id}
        axios.post('/users/updateFind',da).then((res)=>{
          if(res.data.status=='0'){
            this.$message.success(res.data.msg)
          }else{
            alert('系统异常！')
            return findAccess = !findAccess
          }
        })
      },
      getUserList ()　{
        axios.get('/users/root').then((res)=>{
          let _res = res.data;
          if(_res.status=="0"){
            this.tableData = _res.result.list;
          }else{
            this.tableData = [];
          }
        })
      }
    }
  }
</script>
<style scoped>
  table.gridtable {
      font-family: verdana,arial,sans-serif;
      font-size:11px;
      color:#333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
  }
  table.gridtable th {
      border-width: 1px;
      padding: 15px 50px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
  }
 table.gridtable td {
      border-width: 1px;
      padding: 15px 50px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffff;
    }
</style>
